<template>
  <el-dialog
    title="报损报溢导出"
    :visible="visible"
    @close="exportCancel"
    @open="exportOpen"
    class="main_dialog dialog500 export-container"
  >
    <div class="export-item">
      <p class="export-section-title">选择导出时间</p>
      <el-date-picker
        v-model="created_at"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="changeTime"
      >
      </el-date-picker>
      <el-tooltip
        class="item"
        effect="dark"
        content="时间范围只能选择31日之内"
        placement="bottom"
      >
        <i class="el-icon-question"></i>
      </el-tooltip>
    </div>
    <div class="export-item">
      <p class="export-section-title">单据类型</p>
      <el-select 
        v-model="type"
        clearable
        class="wid240"
        placeholder="请选择单据类型"
      >
        <el-option label="所有" value=""></el-option>
        <el-option
          v-for="(type, index) in typeList"
          :key="index"
          :label="type"
          :value="parseInt(index)"
        ></el-option>
      </el-select>
    </div>
    <div class="export-item">
      <p class="export-section-title">状态</p>
      <el-select
        v-model="status"
        clearable
        class="wid240"
        placeholder="状态"
      >
        <el-option label="所有" value=""></el-option>
        <el-option
          v-for="(status, index) in statusList"
          :key="index"
          :label="status"
          :value="parseInt(index + 1)"
        ></el-option>
      </el-select>
    </div>
    <div class="export-item">
      <el-checkbox class="export-checkbox" v-model="goodSpicker">
        导出商品信息
        <el-tooltip
          effect="dark"
          content="默认不勾选，则不导出商品信息"
          placement="bottom"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
      </el-checkbox>
    </div>
    <div class="export-item" v-show="goodSpicker">
      <p class="export-section-title">选择导出商品字段信息</p>
      <el-checkbox-group v-model="list_headers">
        <el-checkbox
          v-for="goods in exportGoodsList"
          :key="goods.id"
          :label="goods.id"
          >{{ goods.name }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="exportCancel">取 消</el-button>
      <el-button v-show="goodSpicker" @click="checked = !checked">{{ checked ? "取消全选" : "全 选"}}</el-button>
      <el-button type="primary" @click="exportConfirm" v-repeatClick>确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reportedSpillsExport } from "@/api/warehouse/warehouseLoss";
import { exportMethod } from "@/utils/index";
import { packApi } from "@/utils/public";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    statusList: {
      type: Array,
      default: ()=> []
    },
    typeList: {
      type: Object,
      default: ()=> {}
    },
  },
  data() {
    return {
      created_at: [],
      list_headers: [],
      type: "",
      status: "",
      goodSpicker: false,
      exportGoodsList: [
        { id: 0, name: "序号" },
        { id: 1, name: "商品名称" },
        { id: 2, name: "单位" },
        { id: 3, name: "数量" },
        { id: 4, name: "库存价" },
        { id: 5, name: "金额" },
        { id: 6, name: "备注" },
      ],
      exportInfo: {}, // 导出缓存信息
    };
  },
  computed: {
    checked: {
      get() {
        return this.list_headers.length === this.exportGoodsList.length;
      },
      set(val) {
        this.list_headers = val ? this.exportGoodsList.map(item=> item.id) : [];
      }
    }
  },
  methods: {
    exportOpen() {
      this.exportInfo = JSON.parse(localStorage.getItem("exportInfo")) || {};
      if(this.exportInfo.lossListHeaders) this.list_headers = this.exportInfo.lossListHeaders;
    },
    // 重置data数据
    resetData() {
      this.created_at = [];
      this.list_headers = [];
      this.type = "";
      this.status = "";
      this.goodSpicker = false;
    },
    // 导出时间选择
    changeTime(val) {
      if (!val) return;
      let start = new Date(val[0]);
      let end = new Date(val[1]);
      // 计算时间差，单位为天
      let diffTimeInDays = Math.abs(end - start) / (1000 * 3600 * 24);
      if (diffTimeInDays > 31) {
        this.$message.warning("选择时间跨度不能超过31日");
        this.created_at = [];
      } else {
        this.created_at = val;
      }
    },
    // 确定
    exportConfirm() {
      if(!this.created_at) return this.$message.warning("请选择导出时间");
      if(!this.created_at.length) return this.$message.warning("请选择导出时间");
      let data = packApi({
        created_at: this.created_at.join("_"),
        type: this.type,
        status: this.status,
        list_headers: this.goodSpicker ? this.list_headers.join("-") : "",
      });
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      reportedSpillsExport(data).then((res) => {
        exportMethod(res, "报损报溢列表", notify);
        this.exportInfo.lossListHeaders = this.list_headers;
        localStorage.setItem("exportInfo",JSON.stringify(this.exportInfo));
        this.exportCancel();
      }).catch(() => {
        this.$message.error("导出失败");
      });
    },
    // 取消
    exportCancel() {
      this.$emit("update:visible", false);
      this.resetData();
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.export-container {
  .export-item {
    margin-top: 10px;
    &:first-child {
      margin-top: 0;
    }
    .export-section-title {
      font-size: 16px;
      color: #000000;
      margin-bottom: 10px;
    }
  }
}
.export-checkbox {
  /deep/.el-checkbox__label {
   font-size: 16px;
 }
}
.main_dialog .el-checkbox {
  margin-bottom: 10px;
}
.el-checkbox-group .el-checkbox {
  width: 25%;
}
.mg-r-7 {
  margin-right: 7px;
}
</style>